<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3911564_ynvs5zhem7p.css">
    <link rel="stylesheet" href="./css/ProductManagement.css">
</head>

<body>
    <div class="product">
        <div class="productHead">
            <div class="headTxt"><img src="./image/页面标题_u115.png" alt="">
                <span>产品管理</span>
            </div>
            <div class="headBtn">
                <div class="headBtn1">
                    <i class="iconfont icon-daoru"></i>
                    <span>导入</span>
                </div>
                <div class="headBtn2">
                    <i class="iconfont icon-export"></i>
                    <span>导出</span>
                </div>
                <div class="headBtn3">
                    <i class="iconfont icon-shuaxin"></i>
                    <span class="refresh">刷新</span>
                </div>
            </div>
        </div>
        <div class="productInquire">
            <div class="searchHead">
                <i class="iconfont icon-sousuoxiao"></i>
                <span>筛选查询</span>
            </div>
            <div class="productSearch">
                <div class="searchContent">
                    <div class="productName">
                        <span>产品名称:</span>
                        <input type="text" class="inpName">
                    </div>
                    <div class="productId">
                        <span>产品编号:</span>
                        <input type="text" class="inpId">
                    </div>
                    <div class="productBtn">
                        <button class="searchBtn">查询</button>
                        <button class="resetBtn">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="productContent">
            <div class="dateList">
                <div>
                    <i class="iconfont icon-liebiao"></i>
                    <span>数据列表</span>
                </div>
                <div><button class="addBtn" data-target="#addModal" data-toggle="modal">新增</button></div>
            </div>
            <table class="table table-bordered">
                <tr>
                    <th class="boxInp">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>标准单价（元）</th>
                    <th>产品规格</th>
                    <th>备注</th>
                    <th class="caoZuo">操作</th>
                </tr>
                <tbody class="tbContent"></tbody>
            </table>
        </div>
        <!-- 页码 -->
        <div id="count">
            <nav aria-label="Page navigation">
                <ul class="pagination changePage">
                    <!-- <li class="leftBtn"><a href="#" class="prev"><span aria-hidden="true" class="navigation">&laquo;</span></a></li>
                    <li class="rightBtn"><a href="#" class="next"><span aria-hidden="true" class="navigation">&raquo;</span></a></li> -->
                </ul>
            </nav>
        </div>
        <!-- 添加弹出框 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">新增产品信息</h4>
                    </div>
                    <div class="modal-body moTaiKuang">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1"><span>*</span>产品名称</label>
                                <input type="text" class="form-control addName" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1"><span>*</span>产品编码</label>
                                <input type="text" class="form-control addID" disabled placeholder="自动生成编码"/>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1"><span>*</span>标准单价（元）</label>
                                <input type="text" class="form-control addPrice" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1"><span>*</span>产品规格</label>
                                <input type="text" class="form-control addGuiGe" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">备注</label>
                                <input type="text" class="form-control addRemarks" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <button type="button" class="btn btn-success addSaveBtn">
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改产品信息</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">产品名称</label>
                                <input type="text" class="form-control" id="editName" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">产品编号</label>
                                <input type="text" class="form-control" id="edit-id" placeholder="自动生成编码" disabled>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">标准单价（元）</label>
                                <input type="text" class="form-control" id="editPrice" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">产品规格</label>
                                <input type="text" class="form-control" id="editGuiGe" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">备注</label>
                                <input type="text" class="form-control" id="editRemarks" placeholder="">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" id="editSure">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 删除 -->
        <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        您确定删除吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger deleteBtn">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jQuery-3.6.3.js"></script>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./js/database.js"></script>
    <script src="./js/ProductManagement.js"></script>
</body>

</html>